<template>
  <div>
    <el-tooltip placement="left" content="备件操作">
      <el-button size="mini" type="primary" icon="el-icon-star-off" @click="to" />
    </el-tooltip>
    <el-dialog :append-to-body="true" :visible.sync="dialog" title="备件操作" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="操作类型" prop="operateType">
          <el-select
            v-model="form.operateType"
            default-first-option
            placeholder="请选择操作类型"
            style="width: 370px;"
            class="filter-item"
            @change="onOperSelect"
          >
            <el-option
              v-for="(item, index) in operOptions"
              :key="item.name + index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="operateType === 2" label="出库用途">
          <el-input v-model="form.purpose" style="width: 370px;" />
        </el-form-item>
        <el-form-item v-if="operateType === 2" label="领用人">
          <el-input v-model="form.usedBy" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.notes" type="textarea" :rows="4" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, edit } from '@/api/tSparepartRetrieval'
import { parseTime } from '@/utils/index'
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      operateType: 2,
      operOptions: [
        { 'id': 2, 'name': '出库' },
        { 'id': 3, 'name': '维修' },
        { 'id': 4, 'name': '移库' },
        { 'id': 5, 'name': '报废' }
      ],
      form: {
        id: '',
        purpose: '',
        usedBy: '',
        operateType: 2,
        eqptId: this.data.id,
        state: 2
      },
      rules: {
        operateType: [
          { required: true, message: '请选择操作类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onOperSelect(event) {
      this.operateType = event
      this.form.state = event
    },
    to() {
      console.log(this.data)
      if (this.data.state === 1) {
        this.$notify({
          title: '该配件已出库！',
          type: 'success',
          duration: 2500
        })
        return
      }
      this.dialog = true
      this.form.eqptId = this.data.id
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.doAdd()
        }
      })
    },
    doAdd() {
      this.form.retrievalTime = parseTime(this.form.retrievalTime)
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.supThis.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.supThis.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        purpose: '',
        usedBy: '',
        operateType: 2,
        eqptId: this.data.id,
        state: 2
      }
    }
  } // end of methods
}
</script>

<style scoped>
div {
  display: inline-block;
  margin-right: 3px;
}
</style>
